<script setup lang="ts">
import {useRoute} from "vue-router";
import feedbackForm from './feedbackForm.vue'

const route = useRoute()
const active = ref(route.query.link)
const list = ref([
  { name:'关于我们'},
  { name:'用户协议'},
  { name:'用户沟通'},
  { name:'联系我们'},
])

</script>

<template>
<div class="link-box">
  <div class="left-menu">
    <ul>
      <li :class="{active:active === item.name}"
          @click="active = item.name"
          v-for="(item,index) in list" :key="index">{{item.name}}</li>
    </ul>
  </div>
  <div class="right-content">
    <div class="title">{{active === '用户沟通' ? '用户沟通网站用户反馈意见表' : active}}</div>
    <div class="text" v-if="active === '关于我们'">
      <p>
        贸行四海是一家研究、传播和服务中国企业出海的行业智库。我们致力于成为全价值链出海的导航员，携手踏上全球化发展之路的中国企业，共同谱写“属于中国人的大航海时代”。
        贸行四海以“导航站+自媒体矩阵+活动+智库”四位一体，与出海企业和人群展开密切的联动。
      </p>
    </div>
    <div class="text" v-if="active === '用户沟通'">
      <feedback-form />
    </div>
    <div class="text" v-if="active === '联系我们'">
      <p>与贸行四海的合作事宜（内容、活动、商务）等，请联系贸行四海主理人天巫Ted（微信号symxxh），添加时请简要告知意向合作事宜和您的身份。
        如本网站内容无意中侵犯了任意媒体 、公司 、企业或个人等的知识产权，请来电或致函告之，本网站将在规定时间内给予删除等相关处理。也请联系天巫Ted，以获取让您满意的解释。</p>
    </div>
    <div class="text" v-if="active === '用户协议'">贸行四海用户协议USER AGREEMENT
      <p>欢迎来到贸行四海，在您进入贸行四海前，请仔细阅读本协议。</p>
      <p>贸行四海旨在服务踏上全球化发展之路的中国企业，共同谱写“属于中国人的大航海时代”，致力于成为全价值链出海的导航员。</p>
      <p>一旦您在贸行四海登录成功， 在平台上发布任何帖子、评论等任何内容，都需无条件接受和同意遵守本协议。若您对本协 议的条款有异议，请停止使用贸行四海提供的全部服务。</p>
      <p>一、使用规则</p>
      <p>1.用户对其自行发表、上传或传送的内容负全部责任，不得在贸行四海任何页面发布、转载、传送含有下列内容之一的信息，贸行四海有权对下述信息自行处理并不通知用户：</p>
      <p>（1）发布时政、军事、民生、恐暴、金融等相关的敏感内容和无来源的口述；</p>
      <p>（2）损害国家荣誉和利益，泄露国家秘密，破坏国家统一；</p>
      <p>（3）煽动民族仇恨、民族歧视，破坏民族团结；</p>
      <p>（4）破坏国家宗教政策，宣扬邪教和封建迷信；</p>
      <p>（5）散布谣言、非法集会、扰乱社会秩序，破坏社会稳定；</p>
      <p>（6）发布色情、赌博、毒品、教唆犯罪、政治体制等敏感内容；</p>
      <p>（7）政治、宗教、内容不健康、思想倾向不良、变态、恶心、恐怖、暴力内容和图片；</p>
      <p>（8）侮辱或者诽谤他人，侵害他人合法权益；</p>
      <p>（9）含有法律、行政法规禁止的其他内容的信息。</p>
      <p>（10）挑动性别、年龄、地域、职业等矛盾，破坏公序良俗的信息。</p>
      <p>（11）通过诋毁、造谣、煽动负面舆论等方式，恶意攻击和中伤贸行四海与其合作伙伴的商誉与品牌。</p>
      <p>2.未经平台许可，不得发布带有商业推广性质的活动链接、二维码等广告行为以及冒用「贸行四海」名义的推广行为，包括引导加群，引导关注第三方网站、应用与社媒，引导贸行四海用户为第三方服务付费。</p>
      <p> 3.严禁用平台的回复功能对他人进行骚扰攻击，个人中心（包括头像、个性签名等）中不得使用违反平台规定的字眼或图片。</p>
      <p>4.严禁发布假消息、重发旧消息；每一个功能都有各自主题，勿要发布和功能无关的内容。 5.通过贸行四海网站购买的vip、实名认证等权限，以及网站金币等，都属于虚拟产品，一经购买则不能退款，用户购买之前请务必再三确认或跟工作人员提前咨询清楚。</p>
      <p>二、隐私保护</p>
      <p>尊重用户个人隐私信息是贸行四海的一贯制度，我们将采取技术措施和其他必要措施， 确保用户个人隐私信息安全，防止在本服务中收集的用户个人隐私信息泄露、毁损或丢失。</p>
      <p>贸行四海承诺：不对外公开或向第三方透露用户个人隐私信息，或用户在使用服务时存储的非公开内容。</p>
      <p>但下列情况除外：</p>
      <p>（1）事先获得用户的明确授权，包括但不限于：用户同意接受站内第三方用户的站内信沟通、添加好友等互动行为：第三方用户通过消耗积分，希望获得用户注册时预留的对外联系方式，而用户也表示同意的情况；用户参加贸行四海展示的第三方活动、社群、线上调研等，主动向第三方提交个人资料等。</p>
      <p>（2）根据有关的法律法规要求；</p>
      <p>（3） 按照相关政府部门的要求；</p>
      <p>（4） 为维护社会公众的利益。</p>
      <p>三、免责声明</p>
      <p>1.用户在贸行四海发表的内容仅表明其个人的立场和观点，并不代表贸行四海的立场或观 点。作为内容的发表者，需自行对所发表内容负责，须确保内容符合国家法律、法规，不得侵害任何第三方合法权利，因所发表内容引发的一切纠纷，由该内容的发表者承担全部法律及连带责任。贸行四海不承担任何法律及连带责任。</p>
      <p>2.对于因不可抗力或贸行四海不能控制的原因造成的网络服务中断或其它缺陷，贸行四海 不承担任何责任，但将尽力减少因此而给用户造成的损失和影响。</p>
      <p>3.贸行四海有权于任何时间暂时或永久修改或终止协议（或其任何部分），而无论其通知与否，贸行四海对用户和任何第三人均无需承担任何责任。</p>
      <p>4.贸行四海的通知、公告、声明或其它类似内容是本协议的一部分，本协议规则可由贸行四海随时更新，用户应当及时关注，用户同意贸行四海不承担通知义务。</p>
      <p>5.平台有权对用户使用贸行四海的情况进行审查和监督，如用户在使用贸行四海时违反任 何上述规定，贸行四海将采取一切必要的措施（包括但不限于暂停或终止用户帐号，或更改 或删除用户发布的内容等方式）以减轻用户不当行为造成的影响。必要时，贸行四海会向国 家相关的管理部门提供用户的违规信息。</p>
      <p>6.本协议解释权及修订权归贸行四海所有。</p>
    </div>
  </div>
</div>
</template>

<style scoped>
.link-box{
  width: 1000px;
  min-height: 80vh;
  display: flex;
  margin: 50px auto;
  justify-content: center;
  box-shadow: 0 2px 4px #1414141a, 0 6px 12px #1414140f;
  .left-menu{
    width: 200px;
    background: #FAFAFA;
    ul{

      li{
        height: 60px;
        display: flex;
        align-items: center;
        justify-content: center;
        color:#333333;
        border-left: 2px solid rgba(0,0,0,0);
        cursor: pointer;
      }
      .active{
        background: #ffffff;
        border-left: 2px solid #333333;
      }
    }
  }
  .right-content{
    flex: 1;
    background: #ffffff;
    .title{
      color:#333333;
      font-size: 32px;
      padding-left: 20px;
      margin-top: 10px;
    }
    .text{
      padding: 20px;
      font-size: 18px;
      overflow: auto;
      height: calc(100% - 50px);
      p{
        text-indent:20px
      }
    }
  }
}
</style>